<template>
  <el-row>
    <el-col span="12">
      <basic-container>
        <div>
          <avue-crud :option="option"
                     :data="form.details"
                     ref="skuForm"
                     @row-del="rowDel"
                     @row-update="rowUpdate"
                    >
            <template slot="menuLeft">
              <el-button type="primary" size="small" @click="spuShow=true">添加货物</el-button>
            </template>
          </avue-crud>
        </div>
      </basic-container>
      <el-dialog title="所有可选择商品"
                 style="margin-top: -10vh;"
                 :visible.sync="spuShow"
                 width="80%">
        <avue-crud :option="spuOption"
                   :table-loading="loading"
                   :data="spuData"
                   :page="page"
                   ref="crud"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @on-load="onLoad">
          <template slot-scope="scope" slot="menu">
            <el-button type="text"
                       icon="el-icon-menu"
                       size="small"
                       plain
                       style="border: 0;background-color: transparent !important;"
                       @click="handleShowSku(scope.row)">选择规格
            </el-button>
          </template>
        </avue-crud>

      </el-dialog>
      <el-dialog title="入库规格选择"
                 :visible.sync="skuBox"
                 width="60%">
        <avue-crud :data="skuData"
                   :option="skuOption"
                   @on-load="skuLoad"
                   :table-loading="skuLoading"
                   ref="skuCrud"
                   @search-change="skuSearchChange"
                   @search-reset="skuSearchReset"
                   @current-change="skuCurrentChange"
                   :page="skuPage"
                   @size-change="skuSizeChange">
          <template slot-scope="scope" slot="menu">
            <el-button type="text"
                       icon="el-icon-plus"
                       size="small"
                       plain
                       style="border: 0;background-color: transparent !important;"
                       @click="handleAddLog(scope.row)">加入货单
            </el-button>
          </template>
        </avue-crud>
      </el-dialog>

    </el-col>

    <el-col span="7">
      <basic-container style="height: 100%;overflow-y: auto">
        <el-tag>运单信息</el-tag>
        <el-divider></el-divider>
        <div class="step">

          <avue-form  ref="logForm" v-model="form" :option="logisticsOption" @submit="submitForm">
            <template slot-scope="scope" slot="warehouseId">
              <avue-input-table
                @click="reSelect"
                :props="wProps"
                :column="scope.column"
                :on-load="wOnLoad"
                v-model="form.warehouseId"
                ref="warehouse"
                placeholder="请选择数据" >
              </avue-input-table>
            </template>
          </avue-form>
        </div>
      </basic-container>
    </el-col>
  </el-row>

</template>

<script>

  import {getPage} from "@/api/product/spu";
  import {getSkuPage, getSkuDetail, addSku, updateSku, removeSku} from "@/api/product/sku";
  import {getAll,oauth} from "@/api/warehouse/warehouse";
  import {add} from "@/api/warehouse/logistics";
  import {mapGetters} from "vuex";
    export default {
      data(){
          return {
            selectSpu:{},
            /*以下为sku列表所需curd数据*/
            skuId:0,
            skuBox:false,
            skuLoading:true,
            skuQuery:{},
            skuSelectionList: [],
            skuData:[],
            skuPage: {
              pageSize: 10,
              currentPage: 1,
              total: 0
            },
            skuOption:{
              menu:true,
              menuWidth: 150,
              viewBtn: false,
              editBtn: false,
              addBtn: false,
              delBtn: false,
              searchShow: true,
              searchMenuSpan: 6,
              tip: false,
              tree: true,
              border: true,
              index: true,
              selection: true,
              column: [
                {
                  label: "标题",
                  prop: "skuTitle",
                  search: true,
                  rules: [{
                    required: false,
                    message: "请输入",
                    trigger: "blur"
                  }]
                },
                {
                  label: "价格",
                  prop: "skuPrice",
                  search: true,
                  rules: [{
                    required: false,
                    message: "请输入",
                    trigger: "blur"
                  }]
                },
                {
                  label: "规格",
                  prop: "saleAttr",
                  editDisplay:false,
                  search: true,
                  rules: [{
                    required: false,
                    message: "请输入",
                    trigger: "blur"
                  }]
                },
                {
                  label: "图片",
                  prop: "skuImage",
                  type: "upload",
                  listType: 'picture-img',
                }
              ]
            },
            //以下为spu数据
            spuShow:false,
            spuId:0,
            query: {},
            loading: true,
            page: {
              pageSize: 10,
              currentPage: 1,
              total: 0
            },
            selectionList: [],
            spuData:[],
            spuOption: {    excelBtn:true,
              menu:true,
              menuWidth: 200,
              height: 'auto',
              calcHeight: 210,
              searchShow: true,
              tip: false,
              border: true,
              index: true,
              viewBtn: false,
              delBtn:false,
              editBtn:false,
              selection: false,
              addBtn:false,
              column: [
                {
                  label: "ID",
                  prop: "id",
                  hide:true,
                  editDisplay: false,
                  search: true,
                  rules: [{
                    required: false,
                    message: "请输入",
                    trigger: "blur"
                  }]
                },
                {
                  label: "标题",
                  prop: "spuTitle",
                  search: true,
                  rules: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                  }]
                },
                {
                  label: "副标题",
                  prop: "spuInfo",
                  rules: [{
                    required: true,
                    message: "请输入副标题",
                    trigger: "blur"
                  }]
                },

                {
                  label: "所属分类",
                  prop: "spuCategory",
                  search:true,
                  type: "tree",
                  dicUrl: "/api/ocm-product/category/list",
                  props: {
                    label: "categoryName",
                    value: "id"
                  },
                  rules: [{
                    required: true,
                    message: "请输入所属分类",
                    trigger: "click"
                  }]
                },
                {
                  label: "邮费",
                  prop: "spuPostage",
                  rules: [{
                    required: true,
                    message: "请输入邮费",
                    trigger: "blur"
                  }]
                },
                {
                  label: "视频",
                  prop: "spuVideo",
                  accept:"video/mp4",
                  type: "upload",
                  listType: 'picture-img',
                },
                {
                  label: "主图",
                  prop: "spuThumb",
                  type: "upload",
                  listType: 'picture-img',
                  propsHttp: {
                    res: 'data',
                    url: 'link',
                  },
                },
                {
                  label: "图片",
                  hide:true,
                  dataType: 'string',
                  type: "upload",
                  row:true,
                  span:24,
                  listType: 'picture-card',
                  prop: "spuImages",
                  rules: [{
                    required: true,
                    message: "请输入图片",
                    trigger: "blur"
                  }]
                },
                {
                  label: "图片详情",
                  hide:true,
                  prop: "spuDescribe",
                  dataType: 'string',
                  type: "upload",
                  row:true,
                  span:24,
                  listType: 'picture-card',
                },
                {
                  label: "当前状态",
                  search:true,
                  prop: "status",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  dicUrl: "/api/ocm-system/dict/dictionary?code=product_status",
                  type: 'select',
                  rules: [{
                    required: true,
                    message: "请输入0已下架 1待上架 2审核中 3已上架",
                    trigger: "blur"
                  }]
                },
                {
                  label: "商品类型",
                  search:true,
                  prop: "spuType",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  dicUrl: "/api/ocm-system/dict/dictionary?code=product_type",
                  type: 'select',
                  rules: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                  }]
                },
              ]
            },

            option: {    excelBtn:true,
              addBtn:false,
              height: 'auto',
              calcHeight: 210,
              tip: false,
              border: true,
              index: true,
              viewBtn: false,
              menu:true,
              menuWidth: 200,
              column: [
                {
                  label: "商品名",
                  prop: "spuTitle",
                  editDisplay:false,
                },
                {
                  label: "规格",
                  editDisplay:false,
                  prop: "saleAttr",
                },
                {
                  label: "图片",
                  prop: "spuThumb",
                  type: "upload",
                  editDisplay:false,
                  listType: 'picture-img',
                },
                {
                  label: "入库件数",
                  prop: "stockNumber",
                  rules: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                  }]
                },
              ]
            },
            showPassword:false,
            form:{
              warehouseId:'0',
              details:[],
            },
            attrData:[],
            logisticsOption:{
              column: [
                {
                  label: "仓库",
                  prop: "warehouseId",
                  span:24,
                  children: {
                    border: true,
                    index: true,
                    viewBtn: true,
                    calcHeight: 210,
                    column: [
                      {
                        label: '仓库名',
                        width: 120,
                        search:true,
                        searchSpan:5,
                        prop: 'warehouseName'
                      }, {
                        label: "类型",
                        prop: "warehouseType",
                        type: "select",
                        props: {
                          label: "dictValue",
                          value: "dictKey"
                        },
                        search:true,
                        dicUrl: "/api/ocm-system/dict/dictionary?code=warehouse_type",
                        rules: [{
                          required: true,
                          message: "请输入0 官方仓库 1个人仓库 2合作仓库",
                          trigger: "blur"
                        }]
                      }, {
                        label: "验证",
                        prop: "oauth",
                        type: 'select',
                        search: true,
                        dicData: [{
                          title:'无需密码',
                          value:0
                        },{
                          title:'需要密码',
                          value:1
                        }],
                        props: {
                          label: "title",
                          value: "value"
                        }
                      },
                      {
                        label: '所有者',
                        prop: 'warehouseOwner'
                      }],
                  },
                  type:'table',
                  placeholder:'请选择仓库',
                  rules: [{
                    required: true,
                    message: "请选择仓库",
                    trigger: "click"
                  }]
                },
                {
                  type: 'password',
                  label: '验证密码',
                  span: 24,
                  display: false,
                  prop: 'warehousePassword',
                  rules: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                  }]
                },
                {
                  type: 'input',
                  label: '物流单号',
                  span: 24,
                  display: true,
                  prop: 'logisticsNumber',
                  children: {
                    align: 'center',
                    headerAlign: 'center',
                    index: false,
                    addBtn: true,
                    delBtn: true,
                    column: []
                  },
                  rules: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                  }]
                },
                {
                  type: 'number',
                  label: '包裹重量(kg)',
                  span: 24,
                  display: true,
                  prop: 'logisticsWeight',
                  children: {
                    align: 'center',
                    headerAlign: 'center',
                    index: false,
                    addBtn: true,
                    delBtn: true,
                    column: []
                  },
                  rules: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                  }],
                  minRows: 0,
                  precision: 2,
                  controls: true
                },
                {
                  type: 'input',
                  label: '联系电话',
                  span: 24,
                  display: true,
                  prop: 'logisticsPhone',
                  rules: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                  }]
                },
                {
                  type: 'textarea',
                  label: '运单备注',
                  span: 24,
                  display: true,
                  prop: 'remark',
                  children: {
                    align: 'center',
                    headerAlign: 'center',
                    index: false,
                    addBtn: true,
                    delBtn: true,
                    column: []
                  }
                }
              ],
              labelPosition: 'left',
              labelSuffix: '：',
              labelWidth: 120,
              gutter: 0,
              menuBtn: true,
              submitBtn: true,
              submitText: '提交',
              emptyBtn: true,
              emptyText: '清空',
              menuPosition: 'center',
              readonly: false,
              disabled: false
            },
            wProps: {
              label: 'warehouseName',
              value: 'id',
            },

          }
      },
      watch:{
          'form.warehouseId'(){
            this.logisticsOption.column[1].display = this.$refs['warehouse'].active.oauth === 1;
          }
      },
      created() {

      },
      methods:{
        submitForm(form,done){
          if(this.form.details.length<1){
            this.$message({
              message: '您的运单没有添加货物',
              type: 'warning'
            });
            done()
            return
          }
          add(this.form).then(()=>{
            this.$message({
              message: '添加成功,请耐心等待审核',
              type: 'success'
            });
            this.$refs['logForm'].resetForm()
            this.form.details.splice(0,this.form.details.length)
            done()
          }).catch(() => {
            done()
          });

        },

        rowUpdate(row, index, done) {
          this.form.details.splice(index,1,row);
          done()
        },
        rowDel(row) {
          this.form.details.splice(row.index,1);
        },
        handleShowSku(spu){
          this.selectSpu=spu
          this.spuId=spu.id
          this.skuLoad()
          this.skuBox = true
        },
        handleAddLog(sku){
          if(this.form.details.length>0){
            for(let t=0;t<this.form.details.length;t++){
              if(this.form.details[t].skuId===sku.id){
                this.$message({
                  message: '您已选择此商品',
                  type: 'warning'
                });
                return
              }

            }
          }
          this.$prompt('请输入入库数量', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            let data={
              spuId:this.selectSpu.id,
              spuTitle:this.selectSpu.spuTitle,
              spuThumb:this.selectSpu.spuThumb,
              skuId:sku.id,
              saleAttr:sku.saleAttr,
              stockNumber:value
            }
            this.form.details.push(data)
            this.$message({
              message: '添加成功',
              type: 'success'
            });
          })
        },
        //以下为spu显示列表
        searchReset() {
          this.query = {};
          this.onLoad(this.page);
        },
        searchChange(params, done) {
          this.query = params;
          this.page.currentPage = 1;
          if(this.query.shopName!==null){
            this.query['s.shopName']=this.query.shopName
            this.query.shopName=null
          }
          this.onLoad(this.page, params);
          done();
        },
        selectionChange(list) {
          this.selectionList = list;
        },
        selectionClear() {
          this.selectionList = [];
          this.$refs.crud.toggleSelection();
        },
        currentChange(currentPage){
          this.page.currentPage = currentPage;
        },
        sizeChange(pageSize){
          this.page.pageSize = pageSize;
        },
        onLoad(page, params = {}) {
          this.loading = true;
          getPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
            const data = res.data.data;
            this.page.total = data.total;
            this.spuData = data.records;
            this.loading = false;
            this.selectionClear();
          });
        },
        //sku
        skuLoad(){
          getSkuPage(this.skuPage.currentPage, this.skuPage.pageSize,
            Object.assign(this.skuQuery,
              {'k.spuId_equal':this.spuId})
          ).then(res => {
            this.skuLoading=true;
            const data = res.data.data;
            this.skuData = data.records;
            this.skuLoading = false;
            this.skuPage.total = data.total;
          });
        },
        skuSearchChange(params, done) {
          this.skuQuery = params;
          this.skuLoad();
          done();
        },
        skuSearchReset() {
          this.skuQuery = {};
          this.skuLoad();
        },
        skuCurrentChange(currentPage){
          this.skuPage.currentPage = currentPage;
        },
        skuSizeChange(pageSize){
          this.skuPage.pageSize = pageSize;
        },
        wOnLoad: ({ page,value,data }, callback) => {
          if("undefined" === typeof page){
            page={
              currentPage:1,
              pageSize:10
            }
          }
          let wareData=[];
          getAll(page.currentPage, page.pageSize,Object.assign({}, data)).then(res => {
            wareData = res.data.data;
            callback({
              total: wareData.total,
              data:  wareData.records
            })
          });
        },
      }
    }
</script>

<style scoped>
  .step{
    height:calc(100vh - 230px);
    overflow-y: auto;

  }
</style>
